
<template>
  <div class="specialCarOrder">
    <el-form :model="selecrFrom" :inline="true" size="mini" label-width="100px">
      <el-form-item label="收款时间">
        <el-date-picker v-model="selecrFrom.payTime" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="-" label-width="0px">
        <el-date-picker v-model="selecrFrom.payTimeEnd" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="乘客姓名">
        <el-input v-model="selecrFrom.passengername"></el-input>
      </el-form-item>
      <el-form-item label="订单号">
        <el-input v-model="selecrFrom.orderid"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="selecrFrom.passengertel"></el-input>
      </el-form-item>
      <el-form-item label="会员卡号">
        <el-input v-model="selecrFrom.cardCode"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="seachBtn">查询</el-button>
        <!-- <el-button type="parmary" size="mini" @click="getrcOrderList">导出</el-button> -->
      </el-form-item>
      <el-form-item>
        <download-excel class="blueBtn" :data="tableData" :fields="json_fields" worksheet="My Worksheet" name="专车订单列表">
          导出
        </download-excel>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border class="account_table" size="mini"
      :header-cell-style="{ color: '#fff', background: '#6090EC', fontSize: '11px', fontWeight: 'normal'}">
      <el-table-column prop="ordersource" label="订单来源" width="120">
        <template slot-scope="scope">
          <template v-if="scope.row.ordersource==1">空铁管家</template>
          <template v-if="scope.row.ordersource==2">金色世纪</template>
          <template v-if="scope.row.ordersource==3">CRM</template>
        </template>
      </el-table-column>
      <el-table-column prop="orderid" label="订单号" width="200"></el-table-column>
      <el-table-column prop="bussinessorderid" label="合作商订单号" width="120"></el-table-column>
      <el-table-column prop="boardingtime" label="预定时间" width="120"></el-table-column>
      <el-table-column prop="getontime" label="上车时间" width="120"></el-table-column>
      <el-table-column prop="depositamount" label="预留款" width="120"></el-table-column>
      <el-table-column prop="paymentamount" label="用户支付金额" width="120"></el-table-column>
      <el-table-column prop="cancelfee" label="取消费用" width="120"></el-table-column>
      <el-table-column prop="actualprice" label="供应商提供金额" width="120"></el-table-column>
      <el-table-column prop="serviceendtime	" label="服务结束时间" width="120"></el-table-column>
      <el-table-column prop="usedcarway" label="订单类型" width="120">
        <template slot-scope="scope">
          <template v-if="scope.row.usedcarway==1">接机</template>
          <template v-if="scope.row.usedcarway==2">送机</template>
          <template v-if="scope.row.usedcarway==3">接站</template>
          <template v-if="scope.row.usedcarway==4">送站</template>
        </template>
      </el-table-column>
      <el-table-column prop="passengername" label="联系人姓名" width="120"></el-table-column>
      <el-table-column prop="orderstatus" label="订单状态" width="120">
        <template slot-scope="scope">
          <template v-if="scope.row.orderstatus==0">默认</template>
          <template v-if="scope.row.orderstatus==1">未派单</template>
          <template v-if="scope.row.orderstatus==2">等待确认</template>
          <template v-if="scope.row.orderstatus==2">等待确认</template>
          <template v-if="scope.row.orderstatus==3">等待服务</template>
          <template v-if="scope.row.orderstatus==4">服务中</template>
          <template v-if="scope.row.orderstatus==5">服务结束</template>
          <template v-if="scope.row.orderstatus==6">服务取消</template>
          <template v-if="scope.row.orderstatus==7">异常订单</template>
          <template v-if="scope.row.orderstatus==8">服务取消中</template>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="width">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="toview(scope.row,scope.$index)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'specialCarOrder',
    components: {

    },
    data() {
      return {
        json_fields: {
          供应商名称: "supplierName",
          商品名称: "productName",
          审核状态: "ifpass",
          市场价: "marketPrice",
          销售单价: "salePrice",
          会员价: "memberPrice",
          成本价: "originalPrice",
          库存: "stockCount",
          创建时间: "createTime",
        },
        tableData: [],
        selecrFrom: {
          payTime: "",
          payTimeEnd: "",
          passengername: "",
          orderid: "",
          passengertel: "",
          cardCode: "",
        },
        pageSize: 10,
        currentPage: 1,
        pageTotal: 0,
      }
    },
    methods: {
      seachBtn() {
        localStorage.setItem("pageSize", 10);
        localStorage.setItem("pageNum", 1);
        this.getrcOrderList()
      },
      // 查看按钮
      toview(row, arr) {
        console.log(row, arr)
      },
      // 列表接口
      getrcOrderList() {
        this.$axios.getrcOrderList(this.selecrFrom).then((res) => {
          if (res.code == 200) {
            this.tableData = res.data
            this.pageTotal = res.total
          }
        })
      },

      search() {
        localStorage.setItem("pageNum", 1);
        localStorage.setItem("pageSize", 10);
        this.getrcOrderListw();
      },
      // 分页
      handleSizeChange(value) {
        console.log("1", value);
        localStorage.setItem("pageSize", value);
        localStorage.setItem("pageNum", 1);
        this.getrcOrderList();
        this.pageSize = value;
      },
      handleCurrentChange(value) {
        console.log("2", value);
        localStorage.setItem("pageNum", value);
        localStorage.setItem("pageSize", this.pageSize);
        this.currentPage = value
        this.getrcOrderList();
        // orders = res.data;
      },
    },
    mounted() {
      this.getrcOrderList()


    }
  }
</script>

<style scoped>
  .specialCarOrder {
    margin: 20px;
  }
</style>